<template>
  <div class="body">
    <div class="main">
      <Switch button-text="去注册" description="注册后体验更加丰富的功能" title="没有账号？"
              @switch="onClickSwitch"></Switch>
      <SignIn></SignIn>
    </div>
  </div>
</template>

<script setup>

import Switch from "../components/login/Switch.vue";
import SignIn from "../components/login/SignIn.vue";
import {useRoute, useRouter} from "vue-router";

const router = useRouter()


function onClickSwitch() {
  router.push('/register')
}

</script>

<style scoped>
.body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  color: #a0a5a8;
}

.main {
  position: relative;
  top: 10%;
  width: 70%;
  height: 60%;
  padding: 25px;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 20px;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .main {
    transform: scale(0.7);
  }
}

@media (max-width: 1000px) {
  .main {
    transform: scale(0.6);
  }
}

@media (max-width: 800px) {
  .main {
    transform: scale(0.5);
  }
}

@media (max-width: 600px) {
  .main {
    transform: scale(0.4);
  }
}
</style>